<template>
	<mescroll-body ref="mescrollRef" @init="mescrollInit" @up="upCallback" :up="upOption" 
		@down="downCallback">
		<view class="user-fans">
			<view class="header">
				<u-search v-model="keyword" shape="round" background="white" placeholder="请输入搜索关键词" @search="changeTab"
					@custom="changeTab" />
					<view class="m-t-20 fans-msg-box flex">
					    <router-link  class="item" to="/bundle/pages/user_fans/user_fans">
							<view class="img-wrap m-20">
								<image src="../../static/team1.png" mode=""></image>
							</view>
							<view class="my-fans">
								   <view class="all-money-tit">
								       我的好友
									</view>
									<view class="all-money-tit m-t-10" style="color: #e80200;font-size: 16px;font-weight: 700;line-height: 1;">{{distributionInfo.fans}}人</view>
							</view>
					    </router-link>
						<view class="item m-l-20">
							<view class="img-wrap m-20">
								<image src="../../static/team2.png" mode=""></image>
							</view>
							<view class="my-fans">
								<view class="all-money-tit">
								   市场销售
								</view>
								<view class="all-money-tit m-t-10" style="color: #e80200;font-size: 16px;font-weight: 700;line-height: 1;"> {{distributionInfo.team_amount}}</view>
							
							</view>
						</view>                       
					                
					</view>
			</view>
			<view class="content">
				<view class="card-box p-t-20">
					<view v-for="(item, index) in fansList" :key="index" class="card-item flex row-between bg-white p-20">
						<view class="flex">
							<u-image :src="item.avatar" border-radius="50%" width="100rpx" height="100rpx" />
							<view class="fans-info m-l-20">
								<view class="fans-name bold line-1">{{item.nickname}}</view>
								<view class="flex lighter m-t-20">
									<view v-if="item.mobile" class="m-r-20">{{item.mobile}}</view>
									<!-- <view>{{item.create_time}}</view> -->
								</view>
							</view>
						</view>
						<view class="flex-col xs flex-none m-l-20">
							<view class="m-t-5 msg lg"><span>{{item.fans_money}} </span></view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</mescroll-body>
</template>

<script>
	import {
		sortType,
	} from '@/utils/type';
	import {
		getUserFans,
		getDistribution
	} from '@/api/user';
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				upOption: {
					empty: {
						icon: '/static/images/order_null.png',
						tip: '暂无相关数据', // 提示
					}
				},
				active: 'all',
				sortType: -1,
				keyword: "",
				fansSort: sortType.NONE,
				moneySort: sortType.NONE,
				orderSort: sortType.NONE,
				fansList: [],
				distributionInfo:""
			};
		},
		
		onShow() {
			this.getDistributionFun();
		},
		methods: {
			onRefresh() {
				this.fansList = []
				this.mescroll.resetUpScroll();
			},
			async getDistributionFun() {
			    const {
			        data,
			        code
			    } = await getDistribution()
			    if (code == 1) {
			        this.distributionInfo = data
			    }
			},

			// 上拉加载 
			upCallback(page) {
				const {
					fansSort,
					moneySort,
					orderSort,
					active,
					keyword,
				} = this;
				const params = {
					type: active,
					keyword,
					fans: fansSort,
					money: moneySort,
					order: orderSort,
					page_size: page.size,
					page_no: page.num,
				};
				getUserFans(params).then(({
					data
				}) => {
					if (page.num == 1) this.fansList = [];
					const curPageData = data.list;
					const curPageLen = curPageData.length;
					const hasNext = !!data.more;
					this.fansList = this.fansList.concat(curPageData);
					this.mescroll.endSuccess(curPageLen, hasNext);
				}).catch(() => {
					this.mescroll.endErr()
				})

			},

			changeTab(val) {
				this.active = val
				this.onRefresh()
			},

			// 排序状态变化 
			sortChange(type) {
				let {
					fansSort,
					moneySort,
					orderSort
				} = this;

				this.sortType = parseInt(type)

				switch (this.sortType) {
					case 0:
						// 团队排序
						if (fansSort == sortType.DESC || fansSort == sortType.NONE) {
							this.fansSort = sortType.ASC;
							this.moneySort = sortType.NONE
							this.orderSort = sortType.NONE
						} else if (fansSort == sortType.ASC) {
							this.fansSort = sortType.DESC;
							this.moneySort = sortType.NONE;
							this.orderSort = sortType.NONE;
						}
						break;

					case 1:
						// 金额排序
						if (moneySort == sortType.DESC || moneySort == sortType.NONE) {
							this.moneySort = sortType.ASC;
							this.fansSort = sortType.NONE;
							this.orderSort = sortType.NONE
						} else if (moneySort == sortType.ASC) {
							this.moneySort = sortType.DESC;
							this.fansSort = sortType.NONE;
							this.orderSort = sortType.NONE;
						}

						break;
					case 2:
						// 订单排序
						if (orderSort == sortType.DESC || orderSort == sortType.NONE) {
							this.orderSort = sortType.ASC;
							this.moneySort = sortType.NONE;
							this.fansSort = sortType.NONE;
						} else if (orderSort == sortType.ASC) {
							this.orderSort = sortType.DESC;
							this.moneySort = sortType.NONE;
							this.fansSort = sortType.NONE;
						}

						break;
				}

				this.onRefresh()
			}
		}
	};
</script>
<style lang="scss">
	.user-fans {
		.header {
			.fans-msg-box {
					border-radius: 10rpx;
					// width: 100%;
					margin:20rpx 20rpx 0 20rpx;
					
					.item{
						display: flex						;
						align-items: center;
					   // margin: 0 12px 10px 12px;
					   border-radius: 8px;
					   background-color: #fff;
					   padding: 15px 0;
					   flex: 1;
					.img-wrap{
						display: flex;
						justify-content: center;
						align-items: center;
						width: 35px;
						height: 35px;
						image{
							width: 35px;
							height: 35px;
						}
						.my-fans{
							flex: 1;
							margin-left: 12px;
							display: flex;
							flex-direction: column;
							.all-money-tit{
								line-height: 1;
								color: #303133;
								font-size: 14px;
								flex: 1;
							}
						}
					}				
             }  }
			.top-bar {
				padding: 18rpx 50rpx;
				height: 100rpx;

				.bar-item {
					flex: 1;
					padding: 0 30rpx;
					height: 58rpx;

					&:not(:last-of-type) {
						margin-right: 54rpx;
					}
				}

				.item-active {
					color: white;
					background-color: $-color-primary;
					border-radius: 100rpx;
				}
			}

			.sort-bar {
				height: 80rpx;

				.sort-bar-item {
					flex: 1;

					.arrow-icon {
						transform: scale(0.36);
					}

					.item-active {
						color: $-color-primary;
					}
				}
			}
		}
	}

	.content {
		margin: 0 20rpx;
		.card-box {
			.card-item {
				.fans-name {
					width: 300rpx;
				}
				&:not(:last-of-type) {
					border-bottom: $-solid-border;
				}
			}
		}
	}
</style>
